<template>
	<div>
		<el-form
			ref="form"
			:model="formData"
			style="width: 660px;margin-right: 200px"
			label-width="200px"
			:show-message="true"
			:hide-required-asterisk="true"
		>
			<div v-for="(form, index) in formData.list">
				<div>学生 + {{ index }}</div>
				<el-form-item label="姓名" :prop="'list[' + index + '].name'" :rules="rules.name">
					<el-input v-model="form.name"/>
				</el-form-item>
				<el-form-item label="家乡" prop="hometown">
					<el-input v-model="form.hometown"/>
				</el-form-item>
				<el-form-item label="年龄" :prop="'list[' + index + '].age'" :rules="rules.age">
					<el-input v-model="form.age" type="number"/>
				</el-form-item>
				<el-form-item label="身高" prop="howtall">
					<el-input v-model="form.howtall"/>
				</el-form-item>
				<el-form-item label="家庭住址" prop="address">
					<el-input v-model="form.address"/>
				</el-form-item>
				<el-form-item label="生日" prop="birthday">
					<el-date-picker v-model="form.birthday" type="date"
						range-separator="-"
						value-format="yyyy-MM-dd"
						start-placeholder="开始日期"
						end-placeholder="结束日期"></el-date-picker>
				</el-form-item>
				<el-form-item label="起床时间" prop="getuptime">
					<el-time-picker
					    is-range
					    v-model="form.getuptime"
						value-format="HH:MM"
					    range-separator="-"
					    start-placeholder="开始时间"
					    end-placeholder="结束时间"
					    placeholder="选择时间范围">
					</el-time-picker>
				</el-form-item>
				<el-form-item label="性别" prop="gendar">
					<el-select v-model="form.gendar" multiple allow-create filterable>
						<el-option :label="'男'" :value="1"></el-option>
						<el-option :label="'女'" :value="2"></el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="爱好" prop="hobby">
          <el-checkbox-group v-model="form.hobby">
            <el-checkbox label="篮球"></el-checkbox><br/>
            <el-checkbox label="足球"></el-checkbox><br/>
            <el-checkbox label="品乓球"></el-checkbox><br/>
            <el-checkbox label="羽毛球"></el-checkbox><br/>
            <el-checkbox label="排球"></el-checkbox><br/>
          </el-checkbox-group>
          {{ form.hobby.join(', ') }}
        </el-form-item>
				<div>别名:{{form.alias}}<button @click="form.alias = '改变后'">改变</button></div><br/>
				<el-progress :percentage="form.percentage" status="success"></el-progress><br/>
			</div>
		</el-form>
		<el-button @click="submit">提交</el-button>
	</div>
</template>

<script>
export default {
	name: 'FirstForm',
	props: {
		forms: Array
	},
	data() {
		return {
			rules:{
				name: [
					{
					  required: true,
					  message: '姓名能为空',
					  trigger: "change"
					}
				],
				age: [
					{
					  required: true,
					  message: '年报能为空',
					  trigger: "change"
					},
					{	validator: (rule, value, cb) => {
							let reg = /^[0-9][0-9]*(\.[0-9]{1,4})?$/;
							if (!reg.test(value)) cb(new Error("请输入正确的数字"));
							if(value > 100) {
								return cb(new Error("年龄不能大于100"));
							}
							else return cb();
						}, 
						message: "年龄不能大于100！！",
						type: Number,
						trigger: "change"
					}
				]
			},
			formData: {
				list: this.forms
			}
		}
	},
	methods:{
		submit() {
			//this.forms[0].age = null;
			//console.log('this.forms[1]', this.forms[1]);
			//this.forms[0].age = !!this.forms[0].age ? parseFloat(this.forms[0].age) : null;
			console.log('this.form.age', this.forms)
      console.log('this.form.hobby', this.form.hobby.join(','))
			this.$refs.form.validate(valid => {
				alert(valid)
			})
		}
	},
	mounted() {
		console.log('mounted');
	},
	activated() {
		console.log('activated');
	},
	deactivated() {
		console.log('deactivated');
	}
}
</script>

<style>
</style>
